<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {font-size: 100%; height: 100%;}
body {font: 0.8em Verdana,Arial,Helvetica,sans-serif; background-color: #f5f5f5; color: #333;}
h1 {color: #4e5b82; letter-spacing: 2px; font-variant: small-caps;}
h2 {color: #a00;}
/* accordion style */
.accordion-toggle {
  display:block;
  padding-left:1%;
  height:30px;
  background:#a9d06a;
  line-height:30px;
  font-weight:bold;
  color:#000;
  border-bottom:1px solid #cde99f;
  cursor:pointer;
}
.accordion-toggle-active {
  background:#e0542f;
  color:#ffffff;
  border-bottom:1px solid #f68263;
}
.accordion-content {
  background-color:#eee;
  padding: 1%;
  width: 97.8%;
  border: 0.1em solid #e0542f;
}

</style>
</head>

<script type='text/javascript' src='lib/prototype.js'></script>
<script type='text/javascript' src='lib/effects.js'></script>
<script type='text/javascript' src='lib/eventdispatcher.js'></script>
<script type='text/javascript' src='src/accordion.js'></script>

<script type='text/javascript'>
document.observe('dom:loaded',function() {
    var amenu = new AccordionMenu('container').activate('menuitem');
    amenu.on('accordionOpenning', function(menuid) {});
    amenu.on('accordionClosing',  function(menuid) {});
});
</script>

<body>
<div class="wrapper">
  <div id='container'>
    <div id='menuitem'>
      <div id='menuitem-label'   class='accordion-toggle'>Label I</div>
      <div id='menuitem-content' class='accordion-content'>
        <h2>content of menu</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus, ante nec lacinia tristique, nulla enim rutrum augue,
          et laoreet lectus sem vitae est. Quisque ultrices metus eu est congue commodo. Vivamus nec lorem ac enim euismod rhoncus vitae nec ligula. 
          Etiam condimentum porta convallis. Proin ut risus ut ipsum faucibus facilisis a sit amet mauris. Duis facilisis posuere dolor.
          Nulla facilisi. Nam dapibus dolor et metus tincidunt at congue arcu ullamcorper. Phasellus id purus non sem porta commodo. 
          Nam sit amet arcu et augue feugiat ullamcorper at at purus. In hac habitasse platea dictumst.

          Phasellus ac dapibus libero. Duis ac ipsum vitae dui consequat feugiat. Nulla pretium, enim ac varius auctor, 
          turpis lacus iaculis felis, sit amet commodo ipsum turpis ut quam. Phasellus vel nulla posuere ligula lacinia aliquam id id enim. 
          Fusce mollis felis vel dui ultrices pulvinar. Etiam gravida ligula et lacus dignissim condimentum. Ut et erat ac leo luctus sollicitudin sit amet ut arcu. 
          Suspendisse molestie est sed nunc convallis interdum. Praesent in odio quis nisl viverra lobortis. Proin iaculis porttitor purus non porta. 
          Mauris non tellus nec lectus adipiscing porta a quis turpis. Quisque id massa ipsum. Mauris quam leo, porta id convallis eu, tincidunt eu nibh. 
          Nam suscipit molestie dui nec rhoncus. Donec ornare tempor nisi eu rhoncus. Phasellus congue luctus nisl vitae rhoncus. 
          Praesent et nibh in lacus consectetur elementum at eu nulla. Nunc convallis dui hendrerit mi varius eget consequat lacus porttitor. 
        </p>
      </div>
    </div>
    <div id='menuitem2'>
      <div id='menuitem2-label'   class='accordion-toggle'>Label II</div>
      <div id='menuitem2-content' class='accordion-content'>
        <h2>content of menu II</h2>
        <p>
          Aliquam euismod porta lacus, id suscipit augue tristique eu. Curabitur eu libero vulputate neque varius congue quis vitae nulla. 
          Nulla lorem dui, faucibus id venenatis quis, placerat ut diam. Mauris sodales posuere purus vitae auctor. Etiam eu sapien consectetur felis laoreet mollis. 
          Pellentesque tincidunt neque quam. Proin dapibus sollicitudin aliquam. Mauris consectetur sagittis dui, vitae suscipit tellus auctor vitae. 
          Fusce luctus porttitor turpis, nec cursus elit aliquam hendrerit. Aenean ante ipsum, porta in bibendum a, semper vitae orci. 
          Suspendisse nunc ante, interdum id tristique vel, dictum eget ipsum. Etiam vitae enim magna, imperdiet ornare massa. 
          Integer mi ante, tempor ac facilisis in, ultricies ut nibh. Vestibulum dapibus quam eget dolor aliquam quis laoreet turpis varius. 
          In iaculis malesuada tempus. Donec malesuada aliquet dolor non tincidunt. Curabitur massa magna, accumsan at ultricies nec, mattis sit amet tortor. 
        </p> 
      </div>
    </div>
  </div>
</div>
</body>
</html>

